<template>
  <aside v-if="isReady" class="sidebar-bg">
    <el-menu
      active-text-color="#1a73e8"
      background-color="transparent"
      class="sidebar-menu"
      :default-active="activeMenu"
      text-color="#5a5e66"
      router
    >
      <div class="menu-header">
        <h3>导航菜单</h3>
      </div>
      
      <el-menu-item index="/home_page">
        <el-icon><HomeFilled /></el-icon>
        <span>工作台</span>
      </el-menu-item>
      
      <el-sub-menu v-if="userInfo && userInfo.role == 1" index="2">
        <template #title>
          <el-icon><UserFilled /></el-icon>
          <span>人员管理</span>
        </template>
        <el-menu-item index="/user_management">用户管理</el-menu-item> 
        <el-menu-item index="/volunteer_management">志愿者管理</el-menu-item>
      </el-sub-menu>
      
      <el-menu-item 
        v-if="userInfo && userInfo.role == 1"
        index="/activity_management"
      >
        <el-icon><Calendar /></el-icon>
        <span>活动管理</span>
      </el-menu-item>
      
      <el-menu-item 
        v-if="userInfo && userInfo.role == 2"
        index="/activity_signup"
      >
        <el-icon><Calendar /></el-icon>
        <span>活动列表</span>
      </el-menu-item>
      
      <el-menu-item 
        v-if="userInfo && userInfo.role == 2"
        index="/activity_signup_management"
      >
        <el-icon><Document /></el-icon>
        <span>报名管理</span>
      </el-menu-item>
      
      <el-menu-item 
        v-if="userInfo && userInfo.role == 3"
        index="/activity_checkin_management"
      >
        <el-icon><Setting /></el-icon>
        <span>签到签退管理</span>
      </el-menu-item>
      <el-menu-item 
        v-if="userInfo && userInfo.role == 2"
        index="/activity_checkin_vol"
      >
        <el-icon><Setting /></el-icon>
        <span>查看签到签退</span>
      </el-menu-item>
    </el-menu>
  </aside>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import {
  HomeFilled,
  UserFilled,
  Calendar,
  Document,
  Setting
} from '@element-plus/icons-vue'

const route = useRoute()
const userInfo = ref({ role: null }) // Initialize with default role
const isReady = ref(false)

onMounted(async () => {
  try {
    const userData = localStorage.getItem('userInfo')
    userInfo.value = userData ? JSON.parse(userData) : { role: null }
    console.log('当前用户角色:', userInfo.value.role) // 使用console.log代替alert
    await nextTick()
    isReady.value = true
  } catch (error) {
    console.error('Error loading user info:', error)
    userInfo.value = { role: null }
    isReady.value = true
  }
})

// Add null check in permission function
const hasPermission = (requiredRole) => {
  return userInfo.value?.role === requiredRole
}

// 使用计算属性动态获取当前路由路径作为激活菜单
const activeMenu = computed(() => {
  // 获取路由路径的最后部分
  const path = route.path
  // 如果路径是/home_management，则默认激活工作台
  if (path === '/home_management') {
    return '/home_management/home_page'
  }
  return path || '/home_management/home_page'
})

// 初始加载时设置一次激活菜单
onMounted(() => {
  console.log('Current route path:', route.path)
})

// 监听路由变化，更新激活菜单
watch(route, (to) => {
  console.log('Route changed to:', to.path)
})
</script>

<style scoped lang="scss">
/* 样式保持不变 */
$primary-blue: #1a73e8;
$neutral-100: #f8f9fa;
$neutral-600: #6c757d;
$neutral-900: #212529;

.sidebar-bg {
  width: 220px;
  height: calc(100vh - 60px); /* 调整高度，不覆盖头部 */
  background: white;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 60px; /* 从头部下方开始 */
  left: 0;
  z-index: 10;
  padding-top: 16px;

  .menu-header {
    padding: 1px;
    border-bottom: 1px solid rgba($neutral-600, 0.1);
    margin-bottom: 8px;
    display: flex;                // 启用flex布局
    justify-content: center;      // 水平居中
    align-items: center;          // 垂直居中
    text-align: center;           // 文字居中（备用方案）
    
    h3 {
      color: $neutral-900;
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
  }

  .sidebar-menu {
    border-right: none;
    padding-top: 6px;
    padding-bottom: 6px;
    //margin-bottom: 6px;
    :deep(.el-menu-item),
    :deep(.el-sub-menu__title) {
      height: 44px;
      line-height: 44px;
      margin: 4px 8px;
      border-radius: 6px;
      transition: all 0.2s ease;

      .el-icon {
        font-size: 18px;
        margin-right: 8px;
      }

      &:hover {
        background-color: rgba($primary-blue, 0.05);
      }

      &.is-active {
        background-color: rgba($primary-blue, 0.1) !important;
        color: $primary-blue !important;
        font-weight: 500;

        .el-icon {
          color: $primary-blue;
        }
      }
    }
  }
}
</style>